<%--
  每日生产实际
  User: Ivan
  Date: 2020-07-28 22:59
--%>
<style type="text/css">
th, tr, td {
    text-align: center;
}
</style>

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/DailyProduceActual/dailyProduceActual"
          method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="${SYS_QUERY_NAME}"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>日期时间段<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" data-pattern="yyyy-MM-dd" value="${startTime}" size="11"
                   data-toggle="datepicker" placeholder="FROM" data-rule="required">
            <input type="text" name="endTime" data-pattern="yyyy-MM-dd" value="${endTime}" size="11"
                   data-toggle="datepicker" placeholder="TO" data-rule="required">&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/DailyProduceActual/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
    <g:if test="${reportList.size() > 0}">
        <div style="width: 96%; margin: auto;">
            <table id="data" data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr>
                    <th width="50">NO.</th>
                    <th>工段</th>
                    <th>进站数</th>
                    <th>出站数</th>
                </tr>
                </thead>
                <tbody>
                <g:each in="${reportList}" status="i" var="dataInstance">
                    <tr>
                        <td>${i + 1}</td>
                        <td>${dataInstance.STAGE_DESC}</td>
                        <td>
                            <a href="${request.getContextPath()}/DailyProduceActual/dailyProduceActualDetail?transType=TRACKIN&stageId=<%=dataInstance.STAGE_ID%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                               data-toggle="navtab" data-id="dialog-normal"
                               data-options="{id:'dailyProduceActualDetail', title:'进站明细'}">
                                ${dataInstance.IN_QTY}
                            </a>
                        </td>
                        <td>
                            <a href="${request.getContextPath()}/DailyProduceActual/dailyProduceActualDetail?transType=TRACKOUT&stageId=<%=dataInstance.STAGE_ID%>&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                               data-toggle="navtab" data-id="dialog-normal"
                               data-options="{id:'dailyProduceActualDetail', title:'出站明细'}">
                                ${dataInstance.OUT_QTY}
                            </a>
                        </td>
                    </tr>
                </g:each>
                <tr>
                    <td colspan="2">合计</td>
                    <td>
                        <a href="${request.getContextPath()}/DailyProduceActual/dailyProduceActualDetail?transType=TRACKIN&stageId=&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                           data-toggle="navtab" data-id="dialog-normal"
                           data-options="{id:'dailyProduceActualDetail', title:'进站明细'}">
                            ${totalQtyList[0]}
                        </a>
                    </td>
                    <td>
                        <a href="${request.getContextPath()}/DailyProduceActual/dailyProduceActualDetail?transType=TRACKOUT&stageId=&startTime=<%=params.startTime%>&endTime=<%=params.endTime%>"
                           data-toggle="navtab" data-id="dialog-normal"
                           data-options="{id:'dailyProduceActualDetail', title:'出站明细'}">
                            ${totalQtyList[1]}
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div style="width: 96%; height: 450px; margin: 20px auto;" id="dailyProduceActualChart"></div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel"/>
    </g:else>
</div>
<script src="${request.getContextPath()}/js/echarts/v4/echarts.min.js"></script>
<script type="text/javascript">
    var dailyProduceActualChart = function () {
        var myChart = echarts.init(document.getElementById("dailyProduceActualChart"));
        var stageList = [];
        var inQtyList = [];
        var outQtyList = [];
        <g:each in="${reportList}" status="i" var="dataInstance">
        stageList.push('${dataInstance.STAGE_DESC}');
        <g:if test="${dataInstance.IN_QTY == null}">
        inQtyList.push(0);
        </g:if>
        <g:else>
        inQtyList.push(${dataInstance.IN_QTY});
        </g:else>
        <g:if test="${dataInstance.IN_QTY == null}">
        outQtyList.push(0);
        </g:if>
        <g:else>
        outQtyList.push(${dataInstance.OUT_QTY});
        </g:else>
        </g:each>
        option = {
            color: ['#3398DB', '#B6A2DE'],
            title: {
                show: true,
                text: '数据分析图',
                x: 'center',
                textStyle: {
                    fontSize: 20,
                    fontStyle: 'normal',
                    fontWeight: 'bolder',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['进站数', '出站数'],
                x: 'center',
                y: 'bottom',
                padding: 0,
                textStyle: {
                    fontSize: 12
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    name: '工段',
                    show: true,
                    type: 'category',
                    boundaryGap: true,
                    data: stageList,
                    axisLabel: {
                        rotate: 25,
                        show: true,
                        fontSize: 12
                    }
                }
            ],
            yAxis: [
                {
                    name: '数量',
                    show: true,
                    type: 'value',
                    axisLabel: {
                        show: true,
                        fontSize: 12
                    }
                }
            ],
            series: [
                {
                    name: '进站数',
                    type: 'bar',
                    data: inQtyList,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{c}',
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    }
                },
                {
                    name: '出站数',
                    type: 'bar',
                    data: outQtyList,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{c}',
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
    }

    $(function() {
        <g:if test="${reportList.size() > 0}">
        dailyProduceActualChart();
        </g:if>
    });
</script>